<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
const handleClick = () => {
  router.push("/sub-app-1/");
};

const handleClickApp2 = () => {
  router.push("/sub-app-2/");
};
</script>

<template>
  <!-- name：应用名称, url：应用地址 -->
  <div>
    <button @click="handleClick">展示子应用1</button>
    <button @click="handleClickApp2">展示子应用2</button>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.sub-apps-container {
  display: flex;
  width: 100%;
}
.sub-app {
  width: 50%;
  height: 500px;
  overflow: auto;
  border: 1px solid red;
}
</style>
